<template>
    <div class="hcontent">
         <div class="mui-card" v-for="(it,i) in getTotalCar" :key="i">
				<div class="mui-card-content">
					<div class="mui-card-content-inner" style="display:flex;">
						<mt-switch v-model="it.state"  @change="swit(it.id)"></mt-switch>
                        <img :src="it.src" alt="">
                        <div style="margin-left:5px;" class="des"> 
                            <h5 style="font-size:14px;">{{it.title}}</h5>
                            <div class="ccont">   
                                <span class="money">￥{{it.money}}</span>
                                <numbox :max="it.kuchun" :num="it.number" :id="it.id" style="height:30px"></numbox>
                                <a href="#" @click.prevent="del(it.id)">删除</a>
                            </div>
                        </div>
					</div>
				</div>
		</div>
         <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>总计(不含运费)</p>
                        <p>已勾选商品<span class="money">{{shopTotal}}</span>件，总价<span class="money">￥{{totalPrice}}</span></p>
					</div>
				</div>
		</div>
    </div>
</template>
<script>
import { mapGetters} from 'vuex'
import numbox from './subcomponent/cartbox.vue'
import {mapMutations} from 'vuex'
export default {

    computed:{
        ...mapGetters(['getTotalCar','getTotal','shopTotal','totalPrice'])
    },data(){
        return{

        }
    }
    ,
    methods:{
        ...mapMutations(['stateChange','delCart']),
        swit(nid){
             console.log("已经执行了")
            this.getTotalCar.forEach(el => {

                if(el.id===nid){
                    this.stateChange({
                        id:nid,
                        state:el.state
                    });
                    
                }
            });
           
        },
        del(id){
            this.delCart(id);
        }
    },
    created(){
        
    },
    components:{
        numbox
    }
}
</script>
<style scoped>
.hcontent{
    background:#eee;
    height: 100%;
    border:1px solid #fff;
}
img{
    width: 60px;
    height: 60px;
}
.ccont{
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    align-items: center;
}
.money{
    color: red;
    font-weight: bold;
    font-size: 16px;
}.des{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
</style>